Guide Flexbox Interactif

1. Qu'est-ce que Flexbox ?

Flexbox est un système de mise en page qui permet d'organiser facilement les éléments dans un conteneur. Imaginez une boîte élastique qui peut s'adapter et réorganiser son contenu automatiquement !

Comment activer Flexbox

          .container {
    display: flex;
}
        

1

2

3

2. Direction des éléments

flex-direction

          .container {
    display: flex;
    flex-direction: row; /* par défaut */
    /* ou */
    flex-direction: column;
}
        

1

2

3

3. Alignement horizontal (justify-content)

justify-content

          .container {
    display: flex;
    justify-content: flex-start; /* par défaut */
    /* autres valeurs :
    justify-content: center;
    justify-content: flex-end;
    justify-content: space-between;
    justify-content: space-around; */
}
        

1

2

3

4. Alignement vertical (align-items)

align-items

          .container {
    display: flex;
    align-items: stretch; /* par défaut */
    /* autres valeurs :
    align-items: center;
    align-items: flex-start;
    align-items: flex-end; */
}
        

1

2

3

5. Flexibilité des éléments

flex-grow

          .item {
    flex-grow: 0; /* par défaut */
    /* ou */
    flex-grow: 1; /* prend l'espace disponible */
}
        

1

2

3

5b. Comprendre flex-grow et flex-shrink

flex-grow et flex-shrink contrôlent comment les éléments grandissent ou rétrécissent dans l'espace disponible. Imaginez que flex-grow est comme un "droit à grandir" et flex-shrink comme un "droit à rétrécir".

Comment fonctionne flex-grow ?

flex-grow: le droit de grandir

          .item {
  flex-grow: 0;  /* Ne grandira pas (par défaut) */
  flex-grow: 1;  /* Grandira proportionnellement */
  flex-grow: 2;  /* Grandira 2 fois plus que flex-grow: 1 */
}
      

Item 1:

Item 2:

Item 1

grow: 0

Item 2

grow: 0

Comment ça marche :

- flex-grow: 0 = l'élément garde sa taille de base
- flex-grow: 1 = l'élément prend une part de l'espace disponible
- flex-grow: 2 = l'élément prend deux parts de l'espace disponible

Exemple : Si vous avez 100px d'espace libre et :

- Item 1 (grow:1) et Item 2 (grow:1) → Chacun prend 50px
- Item 1 (grow:2) et Item 2 (grow:1) → Item 1 prend 67px, Item 2 prend 33px

Comment fonctionne flex-shrink ?

flex-shrink: le droit de rétrécir

          .item {
      flex-shrink: 1;  /* Rétrécira si nécessaire (par défaut) */
      flex-shrink: 0;  /* Ne rétrécira pas */
      flex-shrink: 2;  /* Rétrécira 2 fois plus que flex-shrink: 1 */
  }
      

Item 1:

Item 2:

Largeur du conteneur:

Item 1

shrink: 1

200px